<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
</head>
<body>
<div id="app">
<div class="banner">
    <div class="title">Food List</div>
    <div class="title">Donate Food</div>
    <div class="title">Me</div>
</div>
<div class="ment">
    <div class="list" >
        <div class="item" v-for="(item,index) in list" :key="index">
            <div v-if="item.type==type">
                <img :src="item.img" alt="" style="width: 80px;height: 80px;">
                <div>{{item.name}}</div>
            </div>
        </div>
    </div>

</div>
<div class="shopCar">
    <img src="../static/shopCar.png" style="width: 80px;height: 80px;text-align: center" alt="">
</div>
<div class="classification">
    <div class="categarytitle">Categary</div>
    <div class="categary" @click="changeType(1)">Fruit</div>
    <div class="categary" @click="changeType(2)">Bread</div>
    <div class="categary" @click="changeType(3)">Vegetage</div>
</div>
<el-dialag v-model="cart">
    <!--<div class="cart">
        <div class="cartTitle">cart</div>
        <div class="cartList">

        </div>
        <div class="button">
            <el-button type="text">reset</el-button>
            <el-button type="text">submit</el-button>
        </div>
    </div>-->
</el-dialag>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../shopping/plugins/vue/vue.js"></script>
<!-- 引入axios -->
<script src="../../shopping/plugins/axios/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="../../shopping/plugins/element-ui/index.js"></script>
<script src="../../shopping/plugins/element-ui/index.css"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                list:[
                    {type:1,name:"黄瓜",img:'https://t15.baidu.com/it/u=1978405471,417550445&fm=224&app=112&size=h200&n=0&f=PNG?sec=1706115600&t=712b3ef4f46b35d4f402213cdc5eba59'},
                    {type:1,name:"胡萝卜",img:'https://t13.baidu.com/it/u=1244833096,298675042&fm=224&app=112&size=h200&n=0&f=PNG?sec=1706115600&t=4650c85a8e75708e68cc53eca4598582'},
                    {type:1,name:"黄瓜",img:'https://t15.baidu.com/it/u=1978405471,417550445&fm=224&app=112&size=h200&n=0&f=PNG?sec=1706115600&t=712b3ef4f46b35d4f402213cdc5eba59'},
                    {type:1,name:"胡萝卜",img:'https://t13.baidu.com/it/u=1244833096,298675042&fm=224&app=112&size=h200&n=0&f=PNG?sec=1706115600&t=4650c85a8e75708e68cc53eca4598582'},
                    {type:1,name:"黄瓜",img:'https://t15.baidu.com/it/u=1978405471,417550445&fm=224&app=112&size=h200&n=0&f=PNG?sec=1706115600&t=712b3ef4f46b35d4f402213cdc5eba59'},
                    {type:1,name:"胡萝卜",img:'https://t13.baidu.com/it/u=1244833096,298675042&fm=224&app=112&size=h200&n=0&f=PNG?sec=1706115600&t=4650c85a8e75708e68cc53eca4598582'},
                    {type:2,name:"石榴",img:'https://f.cdn-static.cn/17830_15808719842073.png?imageView2/2/w/878/q/75'},
                    {type:2,name:"沃柑",img:'http://www.huaguoshan.com/Public/Images/40/11490_thumb.jpg'},
                    {type:2,name:"苹果",img:'http://www.huaguoshan.com/Public/Images/47/11147_thumb.jpg'},
                ],
                cart:false,
                type:1,
            }
        },
        methods:{
            changeType(type){
                this.type = type
            }
        }
    })
</script>

<style>
    *{
        padding: 0;
        bottom: 0;
        box-sizing: border-box;
    }
    .banner{
        display: flex;
        padding: 0 240px;
        margin: 0 240px;
        justify-content: space-between;
        border: 1px solid #000;
    }
    .title{
        line-height: 24px;
        font-size: 18px;
        padding: 5px;
    }
    .title:hover{
        color: #e6a23c;
        cursor: pointer;
    }

    .classification{
        position: absolute;
        left: 0;
        top:25%;
        width: 100px;
        height: 300px;
        display: block;
        flex-direction: column;
    }
    .classification:hover .categary{
        display: block;
    }
    .categarytitle{
        width: 100px;
        border: 1px solid #000;
        padding: 5px;
        margin: 5px 0 ;
    }
    .categary{
        display: none;
        border: 1px solid #000;
        padding: 5px;
        margin: 5px 0 ;
        width: 85px;
    }

    .ment{
        margin-top: 80px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .list{
        display: grid;
        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
        grid-template-rows: auto;
        justify-items: center;
        text-align: center;
        border: 1px solid #000;
        height: 500px;
        width: 68%;

    }
    .cartTitle{
        width: 300px;
        font-size: 20px;
        padding-left: 10px;
        font-weight: 500;
        border: 1px solid #000;
    }
    .button{
        display: flex;
    }

    .shopCar{
        position: fixed;
        right: 30px;
        height: 120px;
        width: 120px;
        bottom: 20px;
        background-color: #525151;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
</style>
</body>
</html>